<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册网易免费邮箱 - 中国第一大电子邮件服务商</title>
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="stylesheet" type="text/css" href="css/ccc.css">
	
</head>
<body>
	<header class="header">
		<!-- 头部左边背景 -->
		<div class="bg"></div>
		<!-- 头部右边链接 -->
		<div class="links">
			<a href="#">了解更多</a>|<a href="#">反馈意见</a>
		</div>
	</header>
	<section class="content">
		<header class="content-tit">
			<h1>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1>
		</header>
		<div class="mainBody-wrapper">
			<div class="mainBody">
				<div class="regTabs">
					<ul>
					 	<li><a href="#" style="color:#fff; ">注册字母邮箱</a></li>
					 	<li><a href="#" >注册手机号码邮箱</a></li>
					 	<li><a href="#" >注册VIP邮箱</a></li>
					</ul>
				</div>

				<!-- 注册字母邮箱 -->
				<div class="regForm">
					
					<dl class="regForm-item">
						<dt class="regForm-title">
							<span class="txt-impt">*</span>邮件地址
						</dt>

						<dd class="regForm-ct">
							<input type="text" class="ipt">
							<strong style="font-weight:bold;">@</strong>
							<select>
								<option selected="selected">163.com</option>
								<option selected="selected">126.com</option>
								<option selected="selected">yeah.net</option>
							</select>

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
							</div>
						</dd>
					</dl>
					<!-- 密码 -->
					<dl class="regForm-item">
						<dt class="regForm-title">
							<span class="txt-impt">*</span>密码
						</dt>

						<dd class="regForm-ct">
							<input type="text" class="ipt norWidthIpt">
							<div class="tips">
								<span class="txt-tips">6~16个字符，区分大小写</span>
							</div>
						</dd>
					</dl>

					<!-- 确认密码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>确认密码
						</dt>
						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">
							<!-- 提示语 -->
							<div class="tips">
								<span class="txt-tips">请再次填写密码</span>
							</div>
						</dd>
					</dl>

					<!-- 手机号码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>手机号码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt" id="phone" value="+86" style="color:#999;width:322px;">
                             <!-- 国旗下拉列框 -->
								<div class="itlSelect">
								<a href="#" class="flag-CN"><em></em>中国  +86</a>
                                <a href="#" class="flag-AL"><em>&nbsp;</em>  阿尔巴尼亚(Shqipëria) +355</a>
                                <a href="#" class="flag-DZ"><em>&nbsp;</em>阿尔及利亚(People's Democratic Republic of Algeria) +213</a>
                                <a href="#" class="flag-AF"><em>&nbsp;</em>阿富汗(Republic of Afghanistan) +93</a>
                                <a href="#" class="flag-AR"><em>&nbsp;</em>阿根廷(Argentina) +54</a>
                                <a href="#" class="flag-AE"><em>&nbsp;</em>阿拉伯联合大公国(The United Arab Emirates) +971</a>
                                <a href="#" class="flag-AW"><em></em>阿鲁巴(Aruba) +297</a>
                                <a href="#" class="flag-OM"><em></em>阿曼(Sultanate of Oman) +968</a>

                                </div>
							<div class="itl">
								<div class="itl-flag">
									<em></em>
								</div>
							</div>
							<!-- 提示语 -->
							<div class="tips">
								<span class="txt-tips">忘记密码时，可以通过该手机号码快速找回密码</span>
							</div>
						</dd>
					</dl>

					<!-- 验证码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title" style="top:22px;">
							<span class="txt-impt">*</span>验证码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt" style="width: 196px; position:relative; top:0px;">
							<img src="images/call.jpg" class="vCode">
							<a href="#" class="switchvCode" tabindex="-1">看不清楚？换张图片</a>

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请填写图片中的字符，不区分大小写</span>
							</div>
							<div class="btns">
								<a class="btn"><strong>免费获取验证码</strong></a>
							</div>
						</dd>
					</dl>

					<!-- 短信验证码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>短信验证码
						</dt>
						
						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请查收手机短信，并填写短信中的验证码</span>
							</div>
						</dd>
					</dl>

					<!-- 条款 -->
					<dl class="regForm-item">
						<dd class="regForm-ct txt-tips">
							<label></label>
							<input type="checkbox" checked="checked" tabindex="-1">
							"同意"
							<a href="#">"服务条款"</a>
							"和"
							<a href="#">"隐私相关政策"</a>
						</dd>
					</dl>

					<!-- 按钮 -->
					<dl class="regForm-item">
						<dd class="regForm-ct">
							<a class="btnReg">立即注册</a>
						</dd>
					</dl>
				</div>
				<!--注册手机号码邮箱-->
                <div class="regForm" >
					<!-- 手机号码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>手机号码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt" id="phone"  style="color:#999;width:322px;">
                             
							<div class="itl">
								<div class="itl-flag">
									<em></em>
								</div>
							</div>
							<!-- 提示语 -->
							<div class="tips">
								<span class="txt-tips">忘记密码时，可以通过该手机号码快速找回密码</span>
							</div>
						</dd>
					</dl>

					<!-- 图片验证码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title" style="top:22px;">
							<span class="txt-impt">*</span>验证码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt" style="width: 196px; position:relative; top:0px;">
							<img src="images/call.jpg" class="vCode">
							<a href="#" class="switchvCode" tabindex="-1">看不清楚？换张图片</a>

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请填写图片中的字符，不区分大小写</span>
							</div>
							<div class="btns">
								<a class="btn"><strong>免费获取验证码</strong></a>
							</div>
						</dd>
					</dl>

					<!-- 短信验证码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>短信验证码
						</dt>
						
						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请查收手机短信，并填写短信中的验证码</span>
							</div>
						</dd>
					</dl>

                    <!-- 密码 -->
					<dl class="regForm-item">
						<dt class="regForm-title">
							<span class="txt-impt">*</span>密码
						</dt>

						<dd class="regForm-ct">
							<input type="text" class="ipt norWidthIpt">
							<div class="tips">
								<span class="txt-tips">6~16个字符，区分大小写</span>
							</div>
						</dd>
					</dl>

					<!-- 确认密码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>确认密码
						</dt>
						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">
							<!-- 提示语 -->
							<div class="tips">
								<span class="txt-tips">请再次填写密码</span>
							</div>
						</dd>
					</dl>

					<!-- 条款 -->
					<dl class="regForm-item">
						<dd class="regForm-ct txt-tips">
							<label></label>
							<input type="checkbox" checked="checked" tabindex="-1">
							"同意"
							<a href="#">"用户须知"</a>
							"和"
							<a href="#">"隐私相关政策"</a>
						</dd>
					</dl>

					<!-- 按钮 -->
					<dl class="regForm-item">
						<dd class="regForm-ct">
							<a class="btnReg">立即注册</a>
						</dd>
					</dl>
				</div>	
				<!--注册vip邮箱-->
				<div class="regForm">
				    <!--上方提示-->
				    <div class="top-tip">注册网易VIP邮箱，安全提升30%，享1对1服务，30元/月</div>
					<!--用户名-->
					<dl class="regForm-item">
						<dt class="regForm-title">
							<span class="txt-impt">*</span>用户名
						</dt>
						<dd class="regForm-ct">
							<input type="text" class="ipt">
							<strong>@VIP.163.com</strong>

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">6~20个字符，可使用字母、数字、下划线，需以字母开头
								</span>
							</div>
						</dd>
					</dl>
					<!-- 密码 -->
					<dl class="regForm-item">
						<dt class="regForm-title">
							<span class="txt-impt">*</span>密码
						</dt>

						<dd class="regForm-ct">
							<input type="text" class="ipt norWidthIpt">
							<div class="tips">
								<span class="txt-tips">6~16个字符，区分大小写</span>
							</div>
						</dd>
					</dl>

					<!-- 滑动验证码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>滑动验证码
						</dt>
						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">
							<!-- 提示语 -->
							<div class="tips">
								<span class="txt-tips">请滑动上方滑块验证</span>
							</div>
						</dd>
					</dl>

		
					<!-- 安全手机 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title" style="top:22px;">
							<span class="txt-impt">*</span>安全手机
						</dt>

						<dd class="regForm-ct">
							<input type="text" class="ipt" style="width: 196px; position:relative; top:0px;">
							
							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">找回密码和验证时使用，不扣费</span>
							</div>
							<div class="btns">
								<a class="btn"><strong>免费获取验证码</strong></a>
							</div>
						</dd>
					</dl>

					<!-- 手机验证码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>手机验证码
						</dt>
						
						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请填写手机验证码，不区分大小写</span>
							</div>
						</dd>
					</dl>

					<!-- 条款 -->
					<dl class="regForm-item">
						<dd class="regForm-ct txt-tips">
							<label></label>
							<input type="checkbox" checked="checked" tabindex="-1">
							我已阅读并接受
							<a href="#">"网易VIP邮箱服务条款"</a>
						</dd>
					</dl>

					<!-- 按钮 -->
					<dl class="regForm-item">
						<dd class="regForm-ct">
							<a class="btnReg">立即注册</a>
						</dd>
					</dl>

					<!--温馨提示-->
                    <div class="tips-pay">
								<span >
								温馨提示：注册三天内未支付，用户名将被收回，可能被他人抢注！
								</span>
							</div>
				</div>
	
				
			</div>
         
			<!-- 内容区右边 -->
			<div class="mainBody-side">
				<div class="regExt">
					<img src="images/reg_master.gif" />
				</div>
			</div>
		</div>
	</section>



	<script type="text/javascript">

	function itlSelect(){
    //找到下拉列表的A标签
	var links=document.querySelectorAll('.itlSelect a');
    //给找到的A标签  绑定单击事件
	for (i = 0; i < links.length; i++) {
		links[i].addEventListener('click',function(e){
			var a=e.target;
           //获取A标签的文本内容
			var txt=a.innerText;

           //获取A标签的class类名
			var cls=a.className;

			console.log(txt+"--"+cls);

			//获取“+”所在的位置
			//截取字符串，获取“地区编码值”
            var area=txt.substr(txt.indexOf("+"), txt.length -  txt.indexOf("+"));

			//设置输入框 地区编码值
			document.querySelector('#phone').setAttribute('value',area);

		    //设置input输入的国旗标志
		    var p=document.querySelector('.itl-flag');
		    p.className=" itl-flag "+cls;

		})
	}
}
      function switchFlag(){
      	var Flag=document.querySelector('.itl');
      	console.log(Flag);
      	/* 是谁响应点击事件*/
          Flag.addEventListener('click',function(e){
      		var d=e.target;
      		var panel=document.querySelector('.itlSelect'); 

             /*三元运算符可以用if else代替*/
      		// panel.style.display==='none'? panel.style.display='block':panel.style.display='none';

      		if(panel.style.display==='none'){
      			panel.style.display='block';
      		}else{
      			panel.style.display='none';
      		}

      	})

      }

    function switchTab(){
    var tabs=document.querySelectorAll('.regTabs ul li a');
    var ul=document.querySelector('.regTabs ul');
    var panels=document.querySelectorAll('.regForm');
    var Img=document.querySelector('.regExt img');

	for (var i=0;i<tabs.length;i++) {
		panels[i].index=i;
		tabs[i].index=i;
		tabs[i].addEventListener('click',function(e){
			var item=e.target;
			console.log(item.index);
			ul.style.background='url(images/tab.jpg) no-repeat 0 -'+item.index*56+'px';

			for(var j=0;j<tabs.length;j++){
               tabs[j].style.color = "#000";
               panels[j].style.display="none";

			}

			item.style.color="#fff";
			panels[this.index].style.display="block"; 
         
			
		})

	}

    }

switchFlag();
itlSelect();
switchTab();
	


</script>



</body>
</html>